<template>
	<view class="guarantee center-padding">
		<view class="tee-view guarantee-item">
			<image src="https://b.yzcdn.cn/guarantee/light/quality_guarantee.png"
				class="tee-image guarantee-item__icon"></image>
			<view class="tee-view guarantee-item__right">
				<view class="tee-view guarantee-item__title">
					<text class="tee-text">品质保证</text>
					<van-icon name="arrow" />
				</view>
				<text class="tee-text guarantee-item__detail">
					商家已通过“国家企业信用信息公示系统”核验，许可资质齐全，商品品质有保证
				</text>
			</view>
		</view>
		<view class="tee-view guarantee-item">
			<image src="https://b.yzcdn.cn/guarantee/light/freight_insurance.png"
				class="tee-image guarantee-item__icon"></image>
			<view class="tee-view guarantee-item__right">
				<view class="tee-view guarantee-item__title">
					<text class="tee-text">退货包运费</text>
				</view>
				<text class="tee-text guarantee-item__detail">
					商家提供退换货运费补贴，退换货成功后可补贴一定金额运费，实际赠送情况以订单详情页为准
				</text>
			</view>
		</view>
		<view class="tee-view guarantee-item" @click="showPickup=true">
			<image src="https://b.yzcdn.cn/guarantee/light/free_pickup_return.png"
				class="tee-image guarantee-item__icon"></image>
			<view class="tee-view guarantee-item__right">
				<view class="tee-view guarantee-item__title">
					<text class="tee-text">免费上门取退</text>
					<van-icon name="arrow" />
				</view>
				<text class="tee-text guarantee-item__detail">
					订单发生退货，京东/顺丰免费上门取件，退货运费享受放心购折扣价
				</text>
			</view>
		</view>
		<view class="tee-view guarantee-item">
			<image src="https://b.yzcdn.cn/guarantee/light/priority_claims.png" class="tee-image guarantee-item__icon">
			</image>
			<view class="tee-view guarantee-item__right">
				<view class="tee-view guarantee-item__title">
					<text class="tee-text">先行赔付</text>
					<van-icon name="arrow" />
				</view>
				<text class="tee-text guarantee-item__detail">
					若发生商品为过期/三无商品、商品描述与实物不符、与商家发生运费争议等情况，消费者在15天内发起申请并提供有效凭证，
					可享受先行赔付
				</text>
			</view>
		</view>
		<!-- 免费上门去退 -->
		<van-popup v-model:show="showPickup" position="bottom" :style="{ height: '80%' }">
			<pickup></pickup>
		</van-popup>
	</view>
</template>

<script>
	import Pickup from "./pickup.vue"
	export default{
		components:{
			Pickup
		},	
		data(){
			return {
				showPickup:false
			}
		}
	}
</script>

<style>
	.guarantee-item {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		margin-bottom: 64upx;
	}

	.guarantee-item__icon {
		width: 36upx;
		height: 36upx;
		margin-right: 16upx;
		display: inline-block;
	}
	.guarantee-item__right{
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    text-align: left;
	}
	.guarantee-item__title {
	    color: #323233;
	    font-weight: 500;
	    font-size: 28upx;
	    line-height: 1.29;
		display: flex;
		justify-content: space-between;
	}
	.guarantee-item__detail{
	    margin-top: 16upx;
	    color: #969799;
	    font-size: 28upx;
	    line-height: 1.33;
	    display: block;
	}
</style>
